import React, { Ref, useEffect, useImperativeHandle, useState } from 'react';
import * as echarts from 'echarts';
import { optConfig } from './option';
import './index.less';
import { RECT_STYLE, UNIT_TO_M } from '@/utils/constant';
import { getRectCoordinateInfo, mergeLayerFlawMapDot } from '../../script/tool';

interface ChartsOptionConf {
  onRef?: Ref<unknown> | undefined;
  onCardRef?: Ref<any> | undefined;
}

const FlawMapAllLot: React.FC<ChartsOptionConf> = (chartsProps: ChartsOptionConf) => {
  const [options, setOptions] = useState(optConfig);
  const [myChart, setMyChart] = useState<any>();

  useEffect(() => {
    init();
  }, []);

  // 右键显示菜单
  const init = () => {
    var chartDom = document.getElementById('flawMap');
    if (chartDom) {
      const Chart = echarts.init(chartDom);
      if (Chart) {
        setMyChart(Chart);
      }
      setOptions(optConfig);
      options && Chart.setOption(options, { notMerge: true });
    }
  };

  /**
   * 绘制缺陷点
   * 绘制OS避让
   * 绘制矩形
   * @param info
   */
  const drawFlawDotAndRect = async (info: any) => {
    const opt = await getUpdateOption(info, optConfig, UNIT_TO_M);
    myChart.setOption(opt, { notMerge: true });
  };

  // 清空echart的值
  const getEmptyEchart = () => {
    console.log('---------------数据为空,清空map地图--------------->');
    optConfig.series[0].data = [];
    (optConfig.series[1].markLine!.data[0][0].coord as number[]) = [];
    (optConfig.series[1].markLine!.data[0][1].coord as number[]) = [];
    (optConfig.series[2].markLine!.data[0][0].coord as number[]) = [];
    (optConfig.series[2].markLine!.data[0][1].coord as number[]) = [];
    optConfig.series[3].data = [];
    optConfig.xAxis[0].max = 2500;
    optConfig.yAxis[0].max = 3000;
    myChart.setOption(optConfig, { notMerge: true });
  };

  /**
   * 
    [1] opt.series[0]是绘制 缺陷点集合
    [2] opt.series[1]是绘制 os避让
    [3] opt.series[2]是绘制 ds避让
    [4] opt.series[3]是绘制 小卷的矩形lotId
   * @param rect 
   * @param width 
   * @param height 
   * @param dot 
   * @param osAvoidance 
   * @param dsAvoidance 
   * @param optConfig 
   * @param commonStore 
   */
  const getUpdateOption = async (info, optConfig, UNIT_TO_M) => {
    const { rect, dot, commonStore, osAvoidance, dsAvoidance, width, height, layerQrMd } = info;
    const opt = {
      ...optConfig
    };
    // 1 绘制--小卷的矩形lotId
    const rectInfo = await getRectCoordinateInfo(rect);
    rectInfo.coordinateList.push([0, 0, width, height]);
    opt.series[3].data = rectInfo.coordinateList;
    opt.series[3].renderItem = (params, api) => {
      const seriesData = {
        x: api.value(0),
        y: api.value(1) / UNIT_TO_M, //传来的值是毫米，除以1000转成米
        width: api.value(2), // x轴
        height: api.value(3) / UNIT_TO_M, // y轴的单位是m
        index: api.value(4)
      };
      const lotId = rectInfo.infoMap.get(seriesData.index)?.lotId;
      const [x, y] = api.coord([seriesData.x, seriesData.y]); // 坐标转换
      const [width, height] = api.size([seriesData.width, seriesData.height]); // 坐标的宽和高，转换成像素显示
      const resultObj = {
        ...RECT_STYLE,
        shape: { x: x, y: y, width: width, height: height }
      };
      resultObj.textContent.style.text = `${lotId ? lotId : ''}`;
      return resultObj;
    };
    // 2 绘制--缺陷点
    const dotSeries = mergeLayerFlawMapDot(dot, commonStore);
    (opt.series[0].data as unknown) = dotSeries;
    // 3 绘制--os避让,ds避让
    (opt.series[1].markLine!.data[0][0].coord as number[]) = [osAvoidance, 0];
    (opt.series[1].markLine!.data[0][1].coord as number[]) = [osAvoidance, height / UNIT_TO_M];
    (opt.series[2].markLine!.data[0][0].coord as number[]) = [width - dsAvoidance, 0];
    (opt.series[2].markLine!.data[0][1].coord as number[]) = [width - dsAvoidance, height / UNIT_TO_M];
    // 4 绘制--x,y 最大最小值
    opt.xAxis[0].max = width;
    opt.yAxis[0].max = height / UNIT_TO_M;
    // 5 设置二维码坐标系的起始点
    opt.yAxis[1].min = layerQrMd / UNIT_TO_M;
    opt.yAxis[1].max = (layerQrMd + height) / UNIT_TO_M;
    return opt;
  };

  useImperativeHandle(chartsProps.onRef, () => {
    return { drawFlawDotAndRect, getEmptyEchart };
  });

  return (
    <>
      <div className="flaw-map">
        <div id="flawMap"></div>
      </div>
    </>
  );
};

export default FlawMapAllLot;
